import {View, Button, Text, Image, ScrollView, Radio} from '@tarojs/components';
import Taro from '@tarojs/taro';
import React, {Component} from 'react';
import * as T from '../types';
import './memberEquity.less';
import actions from '../actions/index';
import {connect} from 'react-redux';
import {store2Props} from '../selectors';
import chijingEquityImage1 from '@/assets/image/member/chijingEquity1.png';
import chijingEquityImage2 from '@/assets/image/member/chijingEquity2.png';
import chijingEquityImage3 from '@/assets/image/member/chijingEquity3.png';
import chijingEquityImage4 from '@/assets/image/member/chijingEquity4.png';
import lanjingEquityImage1 from '@/assets/image/member/lanjingEquity1.png';
import lanjingEquityImage2 from '@/assets/image/member/lanjingEquity2.png';
import lanjingEquityImage3 from '@/assets/image/member/lanjingEquity3.png';
import lanjingEquityImage4 from '@/assets/image/member/lanjingEquity4.png';
interface ComponentState {
  newUserModel: boolean;
}

type ITopProps = T.IProps & T.ITopProps & ComponentState;
//@ts-ignore
@connect<Partial<ITopProps>, T.ITopState>(store2Props, actions)
export default class Info extends Component<Partial<ITopProps>, T.ITopState> {
  constructor(props: ITopProps) {
    super(props);
    this.state = {};
  }

  render() {
    let {
      actions: {action},
      main: {memberCardType},
    } = this.props;
    const isBlue = ['noMember', 'lanjing'].includes(memberCardType);
    let className = ['lanjing', 'noMember'].includes(memberCardType) ? 'lanjing' : 'chijing';
    return (
      <View className={`memberEquity memberEquity-${className}`}>
        <Text className="memberEquity-title">
          <View
            className="memberEquity-title-line"
            style={{
              marginRight: '16rpx',
            }}
          />
          会员权益
          <View
            className="memberEquity-title-line"
            style={{
              marginLeft: '16rpx',
            }}
          />
        </Text>
        <View className="memberEquityList">
          <View className="memberEquityList-item">
            <Text className="memberEquityList-title">{isBlue ? '社区服务' : '魔力世界主题乐园'}</Text>
            <Text className="memberEquityList-subContent">{isBlue ? '省心便捷随心抵' : 'IP潮玩集合地'} </Text>
            <Text className="memberEquityList-subContent"> {isBlue ? '你想要我的都有' : '限量款IP供应'} </Text>
            <Image className="memberEquityList-Image" src={isBlue ? lanjingEquityImage1 : chijingEquityImage1} />
          </View>
          <View className="memberEquityList-item">
            <Text className="memberEquityList-title">{isBlue ? '生活缴费' : '生活购物'}</Text>
            <Text className="memberEquityList-subContent">{isBlue ? '最低1折起' : '万款商品1折起'}</Text>
            <Text className="memberEquityList-subContent">{isBlue ? '积分当钱花' : '潮流IP一网打尽'}</Text>
            <Image className="memberEquityList-Image" src={isBlue ? lanjingEquityImage2 : chijingEquityImage2} />
          </View>
          <View className="memberEquityList-item">
            <Text className="memberEquityList-title">{isBlue ? '购物福利' : '餐饮美食 '}</Text>
            <Text className="memberEquityList-subContent">{isBlue ? '会员0元购' : '餐饮美食1折起'}</Text>
            <Text className="memberEquityList-subContent">{isBlue ? '优惠叠加更低价' : '好吃又实惠'}</Text>
            <Image className="memberEquityList-Image" src={isBlue ? lanjingEquityImage3 : chijingEquityImage3} />
          </View>
          <View className="memberEquityList-item">
            <Text className="memberEquityList-title">{isBlue ? '魔力世界主题乐园' : '休闲娱乐'}</Text>
            <Text className="memberEquityList-subContent">{isBlue ? '游玩培训应有尽有' : '1折随心玩'}</Text>
            <Text className="memberEquityList-subContent">{isBlue ? '预计省XXX元' : '你想玩的我都有'}</Text>
            <Image className="memberEquityList-Image" src={isBlue ? lanjingEquityImage4 : chijingEquityImage4} />
          </View>
        </View>
      </View>
    );
  }
}
